<template>
  <view class="rewardMechine">
    <view class="header">
      <text>{{ copyLink }}</text>
      <tui-form-button
        radiu="20"
        width="145rpx"
        height="72rpx"
        @click="handlerCopyLink"
        >复制分享</tui-form-button
      >
    </view>
    <view class="container">
      <text class="title">推荐奖励说明</text>
      <view class="reward-box">
        <text class="tag green-tag"> 直接推荐 </text>
        <view class="reward-box-title">
          用户直接推荐他人注册后，获得他人投资额的0.2%的20%作为奖励。
        </view>
        <view class="reward-box-explain">
          例如，若他人投资本金10000U，则每天奖励 = 20000U × 0.2% × 20% = 8U。
        </view>
      </view>
      <view class="reward-box">
        <text class="tag red-tag"> 间接推荐 </text>
        <view class="reward-box-title">
          若被推荐人再推荐他人，用户可获得间接推荐的奖励，即该间接人投资额的0.2%的10%。
        </view>
        <view class="reward-box-explain">
          例如，若间接人投资本金10000U，则每天奖励 = 20000U × 0.2% × 10% = 4U。
        </view>
      </view>
      <view class="reward-box">
        <text class="tag yellow-tag"> 连续推荐 </text>
        <view class="reward-box-title">
          若用户连续推荐3人，则获得多代奖励：
        </view>
        <view class="reward-box-explain">
          第一天，用户获取直接下级的下级投资额的0.2%的10%。
          第二天，用户获取下级的下级的下级投资额的0.2%的10%。
          第三天，用户获取下级的下级的下级的下级投资额的0.2%的10%。
          第四天，用户获取下级的下级的下级的下级的下级的投资额的0.2%的10%。
          第十天开始，重新获取直接下级的下级投资额的0.2%的10%。
          第十一天开始，重新获取下级的下级的下级投资额的0.2%的10%。
        </view>
      </view>
    </view>
    <backOff />
  </view>
</template>

<script setup>
import backOff from "../../components/custom/backOff.vue";
import { ref } from "vue";
const copyLink = ref("https://kdocs.cn/l/ckI3eBoIIPwK");
const handlerCopyLink = () => {
  uni.setClipboardData({
    data: copyLink.value,
    success: function () {
      console.log("success");
	  getApp().tui.toast('复制成功')
    },
    fail: function () {
      console.log("fail");
    },
  });
};
</script>

<style>
.rewardMechine {
  padding: 30rpx 30rpx 150rpx 30rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container {
  margin-top: 40rpx;
}
.container .title {
  font-weight: 600;
  font-size: 30rpx;
  color: #202327;
}
.reward-box {
  margin-top: 20rpx;
  padding: 30rpx 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(49, 212, 157, 0.19);
  border-radius: 16rpx;
}
.reward-box-title {
  margin-top: 26rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #202327;
}
.reward-box-explain {
  margin-top: 12rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #c2c2c2;
}
.tag {
  padding: 10rpx 12rpx;
  border-radius: 2rpx;
}
.green-tag {
  background: rgba(49, 212, 157, 0.2);
  color: #31d49d;
}

.red-tag {
  background: #fec5d6;
  color: #d14473;
}
.yellow-tag {
  background: rgba(246, 143, 37, 0.19);
  color: #be731f;
}
</style>
